<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<style scoped>
  input {
    outline: none;
    width: 200px;
    height: 30px;
    box-sizing: border-box;
    padding-left: 60pxrem;
  }

  button {
    width: 100px;
    height: 100px;
  }

  * {
    margin: 0;
    padding: 0;
  }

  div {
    width: 200px;
    height: 200px;
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    color: #000;
    text-align: center;
    line-height: 200px;
    display: none;
  }
  p{
    display: block;
  }

</style>

<body>
  <input type="text" placeholder="请输入您要搜索的东西" />
  <button>搜索</button>
  <p></p>
  <button>删除</button>
  <div>查找不到您输入的结果</div>
</body>
<script>
  /*  
    localStorage 储存到浏览器刷新关闭都不会消失
    sessionStorage 储存到浏览器,关闭重新打开会消失
  */

  // localStorage.name = "张三"
  // /* 针对性清除只删除name */
  // localStorage.removeItem("name")
  // console.log(localStorage);
  // /* 全部删除 删除浏览器储存的内容 */
  // // localStorage.clear()
  // localStorage.arr = JSON.stringify(arr) /* 想要使其储存数组必须使用这种方法 JSON.stringify (arr) (JSON.parse(localStorage.arr) */
  // console.log(JSON.parse(localStorage.arr));
  // sessionStorage.string = "123"
  // console.log(sessionStorage.string);
  var arr = []
  var inp = document.querySelector("input")
  var but = document.querySelector("button")
  var arrNew = []
  /* 点击添加事件 */
  but.onclick = function () {
    console.log("in");
    if (arr.indexOf(inp.value) == -1) {
      arr.push(inp.value)
    }
    localStorage.arr = JSON.stringify(arr)
    var div = document.querySelector("div")
    var p = document.querySelector("p")
    p.innerText = JSON.parse(localStorage.arr)
  }
  var p = document.querySelector("p")
  p.innerText = JSON.parse(localStorage.arr)
  /* 点击删除事件 */
  var but1 = document.querySelectorAll("button")[1]
  but1.onclick = function () {
    localStorage.clear()
    p.innerText = ""
    inp.value = ""
  }

</script>

</html>
